<template>
	<view class="padding_30">
		<view class="type-item flex">
			<text class="flex-1">手机号码</text>
			<input class="Input" style="text-align: right;" type="number"
				placeholder-style="color:#999999;font-size:28rpx" placeholder="请输入手机号码" v-model="mobile"
				maxlength="11" />
		</view>
		<view class="type-item flex">
			<text class="flex-1">验证码</text>
			<input class="Input" style="text-align: right;" type="number"
				placeholder-style="color:#999999;font-size:28rpx" placeholder="请输入验证码" maxlength="6" v-model="code" />
			<uv-code :seconds="seconds" ref="codeRef" @change="codeChange"></uv-code>
			<text class="code" @click="getCodes">{{tips}}</text>
		</view>
		<view class="type-item flex">
			<text class="flex-1">输入密码</text>
			<input class="Input" style="text-align: right;" type="password"
				placeholder-style="color:#999999;font-size:28rpx" placeholder="请输入密码" v-model="password" />
		</view>
		<view class="type-item flex">
			<text class="flex-1">再次输入密码</text>
			<input class="Input" style="text-align: right;" type="password"
				placeholder-style="color:#999999;font-size:28rpx" placeholder="请再次输入密码" v-model="repassword" />
		</view>
		<view class="footers">
			<view class="btn" @click="register">
				注册并登录
			</view>
			<view>
				<view class="flex" style="padding-top: 100rpx;">
					<image style="width: 28rpx;height: 28rpx;" src="@/static/images/no.png" v-if="!agree"
						mode="aspectFill" @click="clickAgree"></image>
					<image style="width: 28rpx;height: 28rpx;" src="@/static/images/yes.png" v-if="agree"
						mode="aspectFill" @click="clickAgree"></image>
					<view>
						<text style="font-size:24rpx;color: #666;padding-left: 12rpx;">我已阅读并同意</text>
						<text style="font-size:24rpx;color: #FE3052;" @click="toagree('用户协议')">《用户协议》</text>
						<text style="font-size:24rpx;color: #FE3052;" @click="toagree('隐私协议')">《隐私协议》</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	import {onLoad} from '@dcloudio/uni-app'
	const chat2 = inject('$chat')
	import {
		throttle
	} from '@/utils/utils.js'
	import {
		useUserStore
	} from '@/store/modules/user.js'
	const userstore = useUserStore()
	const agree = ref(false)
	const mobile = ref('') //手机号
	const code = ref('') //验证码
	const password = ref('') //密码
	const repassword = ref('') //确认密码
	const seconds = ref(60)
	const tips = ref('')
	const codeRef = ref()
	const invitationCode = ref('')
	onLoad((options)=>{
		invitationCode.value = options.user_id
		uni.showToast({
			title:invitationCode.value
		})
		console.log(invitationCode.value,'====')
	})
	const clickAgree = () => {
		agree.value = !agree.value
	}
	const toagree = (text) => {
		uni.navigateTo({
			url: '/pages/login/agreement/index?title=' + text
		})
	}
	const codeChange = (text) => {
		tips.value = text
	}
	const getCodes = throttle(async () => {
			if (codeRef.value.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				})
				let res = await userstore.getCode({
					mobile: mobile.value
				})
				if (res.code == 200) {
					uni.hideLoading();
					uni.$uv.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					codeRef.value.start();
				} else {
					uni.$uv.toast(res.message)
				}
			} else {
				uni.$uv.toast('倒计时结束后再发送');
			}
		},500)
		// 注册
		const register = throttle(async () => {
			let params = {
				mobile: mobile.value,
				code: code.value,
				password: password.value,
				confirm_password: repassword.value,
				invitation_code:invitationCode.value
			}
			if (agree.value) {
				let result = await userstore.registerOrForgetPwd(params, 1)
				if (result.code == 200) {
					uni.$uv.toast('注册成功')
					userstore.token = result.data.token
					uni.setStorageSync('token', result.data.token)
					uni.setStorageSync('expireTime', result.data.expire_time)
					setTimeout(() => {
						chat2.initialize().then(res => {
							chat2.chatTUILogin(res).then(async res => {
								let result = await userstore.getUserInfo()
								// 修改个人标配资料
								let promise2 = chat2.chat.updateMyProfile({
									nick: result.data.username,
									avatar: result.data.avatar == '' ?
										'/static/images/avatar.png' :
										uni
										.getStorageSync('baseUrl') +
										result
										.data.avatar,
								});
								promise2.then(function(imResponse) {
									console.log(imResponse
									.data); // 更新资料成功
								}).catch(function(imError) {
									console.warn(
										'updateMyProfile error:',
										imError); // 更新资料失败的相关信息
								});
								uni.switchTab({
									url: '/pages/index/index'
								})
							})
						})
					}, 200)
				} else {
					uni.$uv.toast(result.message)
				}
			} else {
				uni.$uv.toast('请阅读并勾选协议')
			}
		}, 1000)
	// 获取验证码
	const getCode = throttle(() => {
		userstore.getCode({
			mobile: mobile.value
		})
	})
</script>

<style lang="scss" scoped>
	.type-item {
		padding: 0 30rpx;
		margin-top: 30rpx;
		justify-content: space-between;
		width: 690rpx;
		height: 112rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.Input {
			font-size: 28rpx;
		}

		.code {
			padding-left: 30rpx;
			font-size: 28rpx;
			color: #FE3052;
		}

		.tip {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}

		.concant-img {
			width: 48rpx;
			height: 48rpx;
		}

		image {
			width: 28rpx;
			height: 28rpx;
		}

		.input-box {
			display: flex;
			align-items: center;

			input {
				text-align: right;
				font-size: 28rpx;
			}
		}
	}

	.footers {
		position: fixed;
		bottom: 104rpx;

		.btn {
			margin-bottom: 60rpx;
		}
	}
</style>